<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>借书单</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	{% include 'public/static_top.html' %}
	<style type="text/css">
		.book_list_1{
			margin-top: 50px;
		}
        #book_empty {
            padding-top: 20px;
        }
		.borrowed {
			float: right;
			color: red;
			font-weight: bold;
			font-size: 1.5em;
		}
        .qrcode {
            width: 80%;
        }
        #del_bookbill {
        	margin-top: 10px;
        	border-left: 1px #ccc solid;
            color: #007aff;
        }
        #make_qrcode {
            display: none;
        }
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="window.history.back(-1)"></a>
		<h1 class="mui-title">借书单</h1>
        <a class="mui-icon mui-icon-plusempty mui-pull-right" onclick="scanCode();"></a>
	</header>

	<div class="book_list_1">
	<ul class="mui-table-view">
        {% for book in booklist %}
		<li id="{{ book.id }}" class="mui-table-view-cell mui-media">
            <a class="mui-icon mui-icon-trash mui-pull-right" id="del_bookbill" onclick="del_bookbill(this);"></a>
			<a href="{{ url('library:book_detail', args=(book.book.id, )) }}">
				<img class="mui-media-object mui-pull-left" src="{{ book.book.cover.url }}">
				<div class="mui-media-body">
					{{ book.book.name }}
					<p class="mui-ellipsis">{{ book.book.author }} </p>
					<p class='mui-ellipsis'> 剩余 {{ book.book.remain_count }} 本</p>
				</div>
			</a>
		</li>
        {% endfor %}
		</ul>
	</div>

    <div class="mui-content-padded" id="make_qrcode">
		<button type="button" class="mui-btn mui-btn-block mui-btn-primary" id="scanCode" data-loading-text="正在生成中...">生成借书二维码</button>
	</div>

    <p class="mui-text-center" id="book_empty">借书单为空,开始<a onclick="scanCode();" style="margin-left: 3px;">添加书籍</a> </p>

	{% include 'public/static_bottom.html' %}
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		mui.init();
        {% if booklist %}
            document.getElementById("make_qrcode").style.display = 'block';
            document.getElementById("book_empty").style.display = 'none';
        {% endif %}
        document.querySelector("button#scanCode").addEventListener('click', function () {
            mui("button#scanCode").button("loading");
            mui.alert("<img class='qrcode' src={{ url('user:borrow_qrcode', args=(user_id,)) }} />", '借书二维码');
            mui("button#scanCode").button("reset");
        })
        wx.config({
            debug: false,
            appId: '{{appId}}',
            timestamp: {{sign.timestamp}},
            nonceStr: '{{sign.nonceStr}}',
            signature: '{{sign.signature}}',
            jsApiList: [ 'scanQRCode',]
        });
        function scanCode() {
            wx.scanQRCode({
                needResult: 1,
                desc: 'scanQRCode desc',
                success: function (res) {
                    result = res.resultStr;
                    mui.ajax("{{ url('user:add_bookbill') }}", {
                        data: {
                            result: result
                        },
                        dataType: 'json',
						type: 'get',
                        success: function (book) {
                            if (book.status == 1) {     // 添加成功
                                book_url = "{{ url('library:book_detail', args=(333, )) }}";
                                book_url = book_url.replace('333', book.id);
                                $("ul.mui-table-view").append(
                                    '<li id=' + book.bookbill_id + ' class="mui-table-view-cell mui-media">' +
                                        '<a href="' + book_url + '">' +
                                            '<img class="mui-media-object mui-pull-left" src="' + book.cover + '">' +
                                            '<div class="mui-media-body">' +
                                                '' + book.name + '' +
                                                '<p class="mui-ellipsis">' + book.author + ' </p>' +
                                                '<p class="mui-ellipsis"> 剩余 ' + book.remain_count + ' 本</p>' +
                                            '</div>' +
                                        '</a>' +
                                    '</li>'
                                )
                                document.getElementById("make_qrcode").style.display = 'block';
                                document.getElementById("book_empty").style.display = 'none';
                            } else if (book.status == 2) {
                                mui.alert('添加失败，请重试');
                            } else if (book.status == 3) {
                                mui.alert('库存不足');
                            } else if (book.status == 4) {
								mui.alert('二维码已过期')
							} else {
                                mui.alert('系统繁忙，请稍后重试或联系图书管理员');
                            }
                        },
                        error: function() {
							mui.toast('网络请求失败，请检查网络连接或联系网络管理员');
						}
                    })
                }
            });
        };
        function del_bookbill(elem) {
            li = elem.parentElement;
            del_url = "{{ url('user:del_bookbill', args=(333, )) }}";
            del_url = del_url.replace('333', li.id);
            mui.ajax(del_url, {
                dataType: 'json',
                type: 'get',
                success: function (res) {
                    if (res.status == 1) {     // 删除成功
                        li.remove();
                    } else if (res.status == 2) {
                        mui.alert('添加失败，请重试');
                    } else {
                        mui.alert('系统繁忙，请稍后重试或联系图书管理员');
                    }
                    // 若没有图书，隐藏生成二维码按钮，显示没有书籍
                    if (document.querySelector('ul.mui-table-view').children.length == 0) {
                        document.getElementById("make_qrcode").style.display = 'none';
                        document.getElementById("book_empty").style.display = 'block';
                    }
                },
                error: function() {
                    mui.toast('网络请求失败，请检查网络连接或联系网络管理员');
                }
            })
        }
	</script>
</body>

</html>
